<template>
  <div class="mine">
    <nav-bar :title="title"></nav-bar>
    <div class="massage">
      <div class="top">
        <div class="info">
          <svg aria-hidden="true">
            <use xlink:href="#icon-yonghu"></use>
          </svg>
          <p>
            {{username}}
          </p>
        </div>
        <div class="detail">
          <router-link to="/detail">
            <p>实名认证</p>
          </router-link>
        </div>
      </div>
      <div class="bottom">
        <van-cell-group>
          <van-cell title="我的预约" is-link @click='myOrder'/>
          <van-cell title="我的卡包" is-link @click='myCard'/>
          <van-cell title="待支付" is-link @click='toPay'/>
          <van-cell title="全部订单" is-link @click='allOrders'/>
        </van-cell-group>
      </div>
    </div>
    <div class="main"></div>
    <div>
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o" replace to="/home">首页</van-tabbar-item>
        <van-tabbar-item icon="search" replace to="order">预约</van-tabbar-item>
        <van-tabbar-item icon="friends-o" replace to='/mine'>我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import NavBar from '../../components/NavBar'
import { mapGetters } from 'vuex'
export default {
  name: 'Mine',
  components: {
    NavBar
  },
  data () {
    return {
      title: '我的',
      active: 2,
      username: {}
    }
  },
  computed: {
    ...mapGetters([
      'isLogin',
      'userInfo'
    ])
  },
  created () {
    this.username = JSON.parse(localStorage.getItem('USERINFO')).username
    console.log(this.username)
  },
  methods: {
    myOrder () {
      this.$router.push({
        path: '/myOrder',
        query: {
          userId: 1
        }
      })
    },
    myCard () {
      this.$router.push({
        path: '/myCard',
        query: {
          userId: 1
        }
      })
    },
    toPay () {
      this.$router.push({
        path: '/toPay',
        query: {
          userId: 1
        }
      })
    },
    allOrders () {
      this.$router.push({
        path: '/allOrders',
        query: {
          userId: 1
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.mine{
  .massage{
    width: 100%;
    height: 150px;
    background-image: linear-gradient(to bottom right , #abdcfa, #0bbef5);
    .top{
      height: 70%;
      display: flex;
      .info{
        width: 50%;
        height: 100%;
        padding: 10px 50px;
        p{
          width: 60%;
          color: #fff;
          font-size: 18px;
          margin-top: -10px;
          text-align: center;
        }
      }
      .detail{
        width: 50%;
        height: 100%;
        padding: 25px 0;
        p{
          color: #fff;
          font-size: 18px;
        }
      }
    }
  }
  .main{
    width: 100%;
    height: 500px;
    border-radius: 15px 15px 0 0;
    background-color: #fff;
    margin-top: -15px;
  }
}
svg{
  height: 80px!important;
  width: 80px!important;
}
</style>
